<template>
  <div>
    <h1>筛选商品</h1>
    <div>
      分类：
      <el-select clearable v-model="query.category" class="m-2" size="large">
        <el-option
          v-for="item in categorys"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      搜索条件：
      <el-input v-model="query.search"></el-input>
      <el-button @click="getshopList">查询</el-button>
    </div>
    <el-table :data="shopList" style="width: 100%">
      <el-table-column
        fixed
        prop="proid"
        label="编号"
        width="200"
        header-align="center"
        align="center"
      />
      <el-table-column prop="category" label="商品类型" width="80" />
      <el-table-column prop="brand" label="品牌" width="120" />
      <el-table-column
        label="图片"
        width="160"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          <img class="img" :src="scope.row.img1" />
        </template>
      </el-table-column>
      <el-table-column
        prop="proname"
        label="商品简介"
        width="200"
        header-align="center"
        align="center"
      />
      <el-table-column prop="originprice" label="价格" width="80" />
      <el-table-column prop="discount" label="折扣" width="80" />
      <el-table-column prop="sales" label="销量" width="90" />
      <el-table-column prop="stock" label="库存" width="80" />
      <el-table-column label="是否推荐">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isrecommend"
            :active-value="1"
            :inactive-value="0"
            style="--el-switch-on-color: red; --el-switch-off-color: #555"
            @change="(val:any) => updateListFlag(scope.row.proid, val)"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否秒杀">
        <template #default="scope">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="scope.row.isseckill"
            style="--el-switch-on-color: red; --el-switch-off-color: #555"
            @change="(val:any)=>updatekill(scope.row.proid,val)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang='ts'>
// clearable  清空选择器
// category   分类
//  search      搜索关键词
import { reactive, ref } from "vue";
import service from "../../../utils/service";
import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";
//定义分类
const categorys = reactive<string[]>([]);
//获取分类
const getCategorys = () => {
  service({
    url: "/pro/getCategory",
  }).then((res) => {
    if (res.data.code == "200") {
      categorys.length = 0;
      categorys.push(...res.data.data);
    }
  });
};
getCategorys();
//查询条件
const query = reactive<{
  category: string;
  search: string;
}>({
  category: "",
  search: "",
});
//定义商品列表查询结果
interface IShop {
  proid: string;
  category: string;
  brand: string;
  img1: string;
  originprice: number;
  proname: string;
  discount: number;
  sales: number;
  stock: number;
  isrecommend: number;
  isseckill: number;
}

//商品列表
const val = ref<any>();
const shopList = reactive<IShop[]>([]);
const getshopList = () => {
  service({
    url: "/pro/searchPro",
    method: "post",
    data: `category=${query.category}&search=${query.search}`,
  }).then((res) => {
    if (res.data.code === "200") {
      shopList.length = 0;
      shopList.push(...res.data.data);
    }
  });
};
const updateListFlag = (proid: string, val: any) => {
  console.log(val);

  let falg = true;
  if (val == 1) {
    falg = true;
  } else {
    falg = false;
  }
  service({
    url: "/pro/updateFlag",
    method: "post",
    data: {
      proid: proid,
      type: "isrecommend",
      flag: falg,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "更新成功！",
        type: "success",
      });
    }
  });
};
const updatekill = (proid: string, val: any) => {
  let wer = true;
  if (val == 1) {
    wer = true;
  } else {
    wer = false;
  }
  service({
    url: "/pro/updateFlag",
    method: "post",
    data: {
      proid: proid,
      type: "isseckill",
      flag: wer,
    },
  }).then((res) => {
    if (res.data.code == "200") {
      console.log(res.data);
    }
  });
};
getshopList();
</script>

<style scoped>
.img {
  width: 120px;
}
.el-input {
  width: 300px;
  margin-right: 10px;
}
</style>